<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Generative color harmonies</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
		<link rel="stylesheet" href="./GenerativeColor.css" />
	</head>
	<body translate="no">
		<div id="app" class="wrap">
			<div class="bg"
				style="background-image: linear-gradient(rgb(112, 120, 131) 12vmin, rgb(180, 190, 216), rgb(212, 210, 237), rgb(232, 214, 241), rgb(241, 217, 238), rgb(214, 211, 213) 69%);">
			</div>
			<div class="colors"><button class="refresh" style="background: rgb(214, 211, 213);"><svg
						xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
						xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
						xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 23 23" version="1.1"
						x="0px" y="0px">
						<path
							d="M 12.109896,2.9653518 C 10.830826,2.9134678 9.5257058,3.132602 8.2817758,3.648946 c -3.9806,1.652399 -6.2540499,5.897846 -5.4179699,10.123046 0.8360799,4.2253 4.5540699,7.274132 8.8613301,7.269532 a 0.9995584,1.0006417 14.999899 1 0 0,-2 c -3.3667302,0 -6.2475202,-2.360557 -6.9004002,-5.660157 -0.65294,-3.2997 1.11025,-6.592765 4.22266,-7.884765 3.1124002,-1.292 6.6825102,-0.213669 8.5488302,2.582031 1.85391,2.77709 1.49946,6.460477 -0.8418,8.845703 l 0.0781,-2.365234 a 1.0001,1.0001 0 0 0 -0.98242,-1.046875 1.0001,1.0001 0 0 0 -1.01758,0.982422 l -0.15235,4.59375 a 1.0001,1.0001 0 0 0 1.03321,1.033203 l 4.5957,-0.152344 a 1.0001,1.0001 0 1 0 -0.0664,-1.998047 l -1.79492,0.06055 c 2.74739,-3.056097 3.10892,-7.618693 0.80859,-11.064453 -1.64326,-2.461525 -4.33252,-3.887808 -7.14648,-4.0019532 z">
						</path>
					</svg></button> <button class="expand" style="background: rgb(214, 211, 213);"><svg
						xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" x="0px" y="0px">
						<defs></defs>
						<polyline points="18.5 14.5 21.5 11.5 18.5 8.5" class="cls-1"></polyline>
						<polyline points="4.5 8.5 1.5 11.5 4.5 14.5" class="cls-1"></polyline>
						<line x1="1.5" y1="11.5" x2="8.5" y2="11.5" class="cls-1"></line>
						<line x1="14.5" y1="11.5" x2="21.5" y2="11.5" class="cls-1"></line>
					</svg></button>
				<div class="color" style="background: rgb(112, 120, 131); color: rgb(30, 32, 35);">
					<div class="label">#707883</div>
					<div class="name">Nocturnal</div>
				</div>
				<div class="color" style="background: rgb(180, 190, 216); color: rgb(74, 93, 143);">
					<div class="label">#b4bed8</div>
					<div class="name">Stardust Evening</div>
				</div>
				<div class="color" style="background: rgb(212, 210, 237); color: rgb(90, 82, 186);">
					<div class="label">#d4d2ed</div>
					<div class="name">Foggy Plateau</div>
				</div>
				<div class="color" style="background: rgb(232, 214, 241); color: rgb(157, 81, 196);">
					<div class="label">#e8d6f1</div>
					<div class="name">Scented Spring</div>
				</div>
				<div class="color" style="background: rgb(241, 217, 238); color: rgb(193, 87, 180);">
					<div class="label">#f1d9ee</div>
					<div class="name">Grape Taffy</div>
				</div>
				<div class="color" style="background: rgb(214, 211, 213); color: rgb(128, 119, 125);">
					<div class="label">#d6d3d5</div>
					<div class="name">Urban Snowfall</div>
				</div>
			</div>
		</div>
		<a class="fulllink" href="https://farbvelo.elastiq.ch/" target="_blank"
			style="background: rgb(184, 185, 225); color: rgb(68, 71, 162);">
			<strong><span>F</span><span>u</span><span>l</span><span>l
				</span><span></span><span>V</span><span>e</span><span>r</span><span>s</span><span>i</span><span>o</span><span>n
				</span></strong>
		</a>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/husl/6.0.1/husl.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.2/chroma.min.js"></script>
		<script src="./GenerativeColor.js"></script>
	</body>
</html>